<template>
  <div class="breadHeader">
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
      <el-breadcrumb-item
        v-for="(item, index) in breadList"
        :key="index"
        :to="item.path"
      >
        {{ item.name }}
      </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- <el-button
      type="primary"
      icon="el-icon-arrow-left"
      plain
      @click="$router.back()"
    >
      返回
    </el-button> -->
  </div>
</template>
<script>
export default {
  name: 'BreadHeader',
  props: {
    bread: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    breadList() {
      if (this.$route.meta.bread) {
        return this.$route.meta.bread;
      } else {
        return this.bread;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
$blue: #144fba;
.breadHeader {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  padding: 0 40px;
  .breadcrumb {
    flex: 1;
  }
}
::v-deep {
  .el-breadcrumb__inner a:hover,
  .el-breadcrumb__inner.is-link:hover {
    color: $blue;
    cursor: pointer;
  }
}
</style>
